<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收藏夹</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/collectionFolder.css">
    <link rel="stylesheet" href="/css/userweb/myPagination.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="folderVue" v-cloak>
    <div class="header">
        <!--导航-->
        <div class="header_nav_container">
            <div class="header_nav_box">
                <div class="user_name">
                    <span>{{user_name}}</span>
                </div>
                <div class="header_nav">
                    <ul>
                        <li>
                            <a :href="'/userweb/index/index.html'">
                                <div class="title_zh">首页</div>
                                <div class="title_en">Home</div>
                            </a>
                        </li>
                        <li>
                            <a :href="'/userweb/index/myShoppingCar.html'">
                                <div class="title_zh">购货车</div>
                                <div class="title_en">Shopping Car</div>
                            </a>
                        </li>
                        <li class="active">
                            <a :href="'/userweb/index/collectionFolder.html'">
                                <div class="title_zh">收藏夹</div>
                                <div class="title_en">Collection folder</div>
                            </a>
                        </li>
                        <li>
                            <a :href="'/userweb/index/customerService.html'">
                                <div class="title_zh">联系客服</div>
                                <div class="title_en">Mine</div>
                            </a>
                        </li>
                        <li class="shop_search">
                            <input type="text" v-model="searchs" placeholder="搜索/Search">
                            <div class="shop_search_btn">
                                <a :href="'/userweb/index/index.html?search='+searchs">搜索/search</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_header">
            <div class="logo">
                <span>小货郎</span>
            </div>
            <div class="cut_line"></div>
            <div class="page_title">
                <div class="title_zh">收藏夹</div>
                <div class="title_en">favourite folder</div>
            </div>
        </div>
        <div class="my_content_box">
            <div class="collection_nav">
                <ul>
                    <li class="nav_btn active">
                        <a href="#collectionProduct" data-toggle="tab" v-on:click = "collectProduct()">
                            <div class="title_zh">收藏商品</div>
                            <div class="title_en">favorite products</div>
                        </a>
                    </li>
                    <li class="nav_btn">
                        <a href="#collectionShop" data-toggle="tab" v-on:click="collectSupplier()">
                            <div class="title_zh">收藏商家</div>
                            <div class="title_en">favorite trader</div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="content_container tab-content">
                <div class="collection_product_content tab-pane active" id="collectionProduct">
                    <div class="content_bar">
                        <ul class="my_nav">
                            <li class="bar_btn active">
                                <a href="#allProduct" data-toggle="tab" v-on:click="collectProduct(0)" onclick="showAllBar()" >
                                    <div class="title_zh">全部商品</div>
                                    <div class="title_en">all Products</div>
                                </a>
                            </li>
                            <div></div>
                            <li class="bar_btn">
                                <a href="#invalidProduct" data-toggle="tab" v-on:click="collectProduct(-1)" onclick="showInvalidBar()">
                                    <div class="title_zh">失效商品</div>
                                    <div class="title_en">not avaliable</div>
                                </a>
                            </li>
                        </ul>
                        <div class="manage_btn_box" id="allBar">
                            <div class="batch_box" id="batchManage">
                                <div class="batch_manage_btn">
                                    <a href="javascript:;" onclick="batchManage()">
                                        <div class="title_zh">批量管理</div>
                                        <div class="title_en">batch management</div>
                                    </a>
                                </div>
                            </div>
                            <div class="batch_box" id="cancelManage">
                                <div class="radio_bar">
                                    <input type="checkbox" class="allCheckbox">
                                    <label><span></span></label>
                                    <div class="radio_title">
                                        <div class="title_zh">全选</div>
                                        <div class="title_en">all</div>
                                    </div>
                                </div>
                                <div class="batch_manage_btn" v-on:click = "delProduct(2)">
                                    <a href="javascript:;">
                                        <div class="title_zh">删除</div>
                                        <div class="title_en">delete</div>
                                    </a>
                                </div>
                                <div class="batch_manage_btn">
                                    <a href="javascript:;" onclick="cancelManage()">
                                        <div class="title_zh">取消管理</div>
                                        <div class="title_en">cancel management</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="manage_btn_box" id="invalidBar">
                            <div class="radio_bar" v-on:click="collectProduct(-1)">
                                <input type="radio" name="invalid-time">
                                <label><span></span></label>
                                <div class="radio_title">
                                    <div class="title_zh">已失效</div>
                                    <div class="title_en">Not valid</div>
                                </div>
                            </div>
                            <div class="radio_bar" v-on:click="collectProduct(1)">
                                <input type="radio" name="invalid-time">
                                <label><span></span></label>
                                <div class="radio_title">
                                    <div class="title_zh">六个月前</div>
                                    <div class="title_en">six months ago</div>
                                </div>
                            </div>
                            <div class="radio_bar" v-on:click="collectProduct(2)">
                                <input type="radio" name="invalid-time">
                                <label><span></span></label>
                                <div class="radio_title">
                                    <div class="title_zh">一年前</div>
                                    <div class="title_en">a year ago</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product_show_box" v-loading="loading">
                        <div class="tab-content">
                            <!--全部商品-->
                            <div class="all_product_list tab-pane active" id="allProduct">
                                <div class="good_area" v-for="list in product">
                                    <div class="management_cont">
                                        <div class="checkbox_bar">
                                            <input type="checkbox" :value="list.collect_id" name="ids">
                                            <label><span></span></label>
                                        </div>
                                    </div>
                                    <div class="good_area_box">
                                        <div class="good_img" v-on:mouseenter="entera" v-on:mouseleave="leavea">
                                            <div class="good_href_box">
                                                <div class="good_shop_href" v-on:click="jumpProduct(list)">
                                                    <a href="#">
                                                        <div class="title_zh">查看商品</div>
                                                        <div class="title_en">view product</div>
                                                    </a>
                                                </div>
                                                <div class="good_href">
                                                    <a :href="'/userweb/index/shopList.html?supplierId='+list.supplier">
                                                        <div class="title_zh">进入店铺</div>
                                                        <div class="title_en">enter into store</div>
                                                    </a>
                                                </div>
                                            </div>
                                            <img :src="list.image" alt="">
                                        </div>
                                        <div class="good_info">
                                            <div class="good_name">
                                                <a :href="'/userweb/index/productInfo.html?productId='+list.product_id">
                                                    <div class="title_zh">{{list.product_name}}</div>
                                                    <!--<div class="title_en">{{list.product_name_english}}</div>-->
                                                </a>
                                            </div>
                                        </div>
                                        <div class="good_price_box">
                                            <div class="good_price">
                                                <em>￡</em>
                                                <span>{{list.price}}/{{list.packing_proportion}}{{list.unit}}</span>
                                            </div>
                                            <div class="good_delete" v-on:click = "delProduct(1,list.collect_id)">
                                                <img src="/image/userweb/slicesImg/delete-img.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="allNoData"></div>
                            </div>
                            <!--失效商品-->
                            <div class="invalid_product_list tab-pane all_product_list" id="invalidProduct">
                                <div class="good_area" v-for="list in loseProduct">
                                    <div class="good_area_box">
                                        <div class="good_img">
                                            <img :src="list.image" alt="">
                                        </div>
                                        <div class="good_info">
                                            <div class="good_name">
                                                <div class="title_zh">{{list.product_name}}</div>
                                                <!--<div class="title_en">{{list.product_name_english}}</div>-->
                                            </div>
                                        </div>
                                        <div class="good_price_box">
                                            <div class="good_price">
                                                <span>已失效/not valid</span>
                                            </div>
                                            <div class="good_delete" v-on:click = "delProduct(1,list.collect_id)">
                                                <img src="/image/userweb/slicesImg/delete-img.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="expiredNoData"></div>
                            </div>
                        </div>
                        <div class="pagination_box" v-html="paginate"></div>
                    </div>
                </div>
                <!--收藏商家-->
                <div class="collection_shop_content tab-pane" id="collectionShop">
                    <div class="product_show_box" v-loading="loading">
                        <div class="all_product_list">
                            <div class="good_area" v-for="list in store">
                                <div class="good_area_box">
                                    <a :href="'/userweb/index/shopList.html?supplierId='+list.supplier_id">
                                        <div class="good_img">
                                            <img :src="list.image" alt="">
                                        </div>
                                    </a>
                                    <div class="good_info">
                                        <div class="good_name">
                                            <a :href="'/userweb/index/shopList.html?supplierId='+list.supplier_id">
                                                <div class="title_zh">{{list.supplier_name}}</div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="score_bar">
                                        <div class="score_title">
                                            <span>评分/score</span>
                                        </div>
                                        <div class="score_img" v-html="list.star"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="shopNoData"></div>
                        <div class="pagination_box" v-html="html"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slogan">
    <div class="slogan_title">
        <p>让我们的生活有更好的选择</p>
    </div>
    <div class="sub_slogan_title">
        <p>Let our lives have a better choice.</p>
    </div>
</div>
{include file="html/Common/indexFooter"}
</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/userweb/jquery.imagezoom.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/userweb/indexHome/collectionFolder.js"></script>
<script>
    function showAllBar() {
        $('#allBar').show();
        $('#invalidBar').hide();
        cancelManage();
    }
    function showInvalidBar() {
        $('#invalidBar').show();
        $('#allBar').hide();
        $('#allProduct').find('input[type="checkbox"]').prop("checked", false);
        $('.allCheckbox').prop("checked", false);
    }
    function batchManage() {
        $('.management_cont').show();
        $('#cancelManage').show();
        $('#batchManage').hide();
    }
    function cancelManage() {
        $('.management_cont').hide();
        $('#batchManage').show();
        $('#cancelManage').hide();
    }
    $('.allCheckbox').click(function () {
        if ($(this).is(':checked')) {
            $(this).prop("checked", true);
            $('#allProduct').find('input[type="checkbox"]').prop("checked", true);
        } else {
            $(this).prop("checked", false);
            $('#allProduct').find('input[type="checkbox"]').prop("checked", false);
        }
    });
</script>
</html>